<!--
 * @Author: your name
 * @Date: 2021-12-14 00:23:09
 * @LastEditTime: 2021-12-26 01:58:16
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \homeStayMS\src\main\resources\static\vue\MainPage\incomeCount\IncomeCount.vue
-->

<template>
  <section id="IncomeCount">
    <div class="box" id="echart-line" style="width: 600px; height: 400px"></div>
    <div
      class="box"
      id="echart-line1"
      style="width: 600px; height: 400px"
    ></div>
    <div
      class="box"
      id="echart-line2"
      style="width: 600px; height: 400px"
    ></div>

  </section>
</template>

<script>
  import api from '../../../js/api/api.js';
export default {
  name: 'IncomeCount',

  components: {},
  data() {
    return {};
  },
  methods: {



    int() {
      // 基于准备好的dom，初始化echarts实例
      //这里多弄几个图  线图，宾状图
      var ss = document.getElementById('echart-line');
      console.log(ss);
      var myChart = echarts.init(ss);

      var id = localStorage.getItem('userId');
      var qi;
      var ba;
      var jiu;
      var shi;
      var shiyi;
      var shier;
      api.getInCount({"id": id}).then((res) => {
        console.log(res.data)
        qi = res.data.result.qi;
        ba = res.data.result.ba;
        jiu = res.data.result.jiu;
        shi = res.data.result.shi;
        shiyi = res.data.result.shiyi;
        shier = res.data.result.shier;
      // 指定图表的配置项和数据
      var option = {
        title: {
          text: '最近营收',
        },
        tooltip: {},
        legend: {
          data: ['营收'],
        },
        xAxis: {
          data: ['7月', '8月', '9月', '10月', '11月','12月'],
        },
        yAxis: {},
        series: [
          {
            name: '营收',
            type: 'bar',
            data: [
              {value:qi},
              {value:ba},
              {value:jiu},
              {value:shi},
              {value:shiyi},
              {value:shier}],
          },
        ],
      };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
      });
    },

    int1() {
      // 基于准备好的dom，初始化echarts实例
      //这里多弄几个图  线图，宾状图
      var ss = document.getElementById('echart-line1');
      console.log(ss);
      var myChart = echarts.init(ss);

      var id = localStorage.getItem('userId');

      var salarys;
      var price;
      api.countSalary({"id": id}).then((res) => {
        salarys = res.data.result.outCount;
        price = res.data.result.inCount;
        // 指定图表的配置项和数据
        var option = {
          title: {
            text: '支出总计',
          },
          tooltip: {},
          legend: {
            data: ['总收入','总支出'],
          },
          xAxis: {
            data: ['7月', '8月', '9月', '10月', '11月','12月'],
          },
          yAxis: {},
          series: [
            {
              name: '收支比',
              type: 'pie',
              radius: '55%',
              data: [
                {value:price,name:'总收入'},
                {value:salarys,name:'总支出'}
              ],
            },
          ],
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
      });
    },
  },

  mounted() {
    this.int();
    this.int1();

  },

  created() {},
};
</script>
<style scoped>
.button-frame {
  margin-bottom: 20px;
}
.box {
  display: flex;
  float: left;
  bottom: 30px;
}
#IncomeCount{
    margin-top: 50px;
    margin-left: 40px;
}

</style>
